<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>父子组件访问示例</title>
</head>
<body>
<div id="app">
    <!-- this.$refs.cpn 可以访问该子组件 -->
    <cpn ref="cpn" :number1="num1" :number2="num2" @num1-change='num1Change' @num2-change='num2Change'></cpn>
    <p>父组件可以通过 $children/$ref 访问子组件</p>
    <p>子组件可以通过 $parent 访问父组件</p>
    <button @click="logChildren">访问子组件</button>
</div>
</body>
<template id="cpn">
    <div>
        <h3>props:
            {{number1}}</h3>
        <h2>data:
            {{childNumber1}}</h2>
        <!-- 会报警告, 不推荐子组件修改 props(v-model), 推荐使用 data 和 computed 属性 -->
        <input type="number" :value="number1" @input="number1Change"/>
        <h3>props:
            {{number2}}</h3>
        <h2>data:
            {{childNumber2}}</h2>
        <input type="number" :value="number2" @input="number2Change"/>
        <button @click="logParent">访问父组件</button>
    </div>
</template>
<script src="../../js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
    const cpn = Vue.component('cpn', {
        template: "#cpn",
        props: {
            number1: Number,
            number2: Number
        },
        data() {
            return {childNumber1: this.number1, childNumber2: this.number2};
        },
        methods: {
            number1Change(event) {
                this.childNumber1 = Number.parseInt(event.target.value);
                this.$emit('num1-change', this.childNumber1);
            },
            number2Change(event) {
                this.childNumber2 = Number.parseInt(event.target.value);
                this.$emit('num2-change', this.childNumber2);
            },
            logParent() {
                console.log("parent", this.$parent);
                console.log("root", this.$root); // 访问根组件 Vue 实例
                console.log("parent == root", this.$parent === this.$root);
            }
        },
        watch: {
            // 监听属性改变
            /**
             * childNumber1 发生改变时调用该函数
             * @param newValue
             * @param oldValue
             */
            childNumber1(newValue, oldValue) {
                this.childNumber2 = newValue * 100;
                this.$emit('num2-change', this.childNumber2);
            },
            childNumber2(newValue) {
                this.childNumber1 = newValue / 100;
                this.$emit('num1-change', this.childNumber1);
            }
        }
    });

    const app = new Vue({
        el: '#app',
        data: {
            num1: 0,
            num2: 0
        },
        methods: {
            num1Change(value) {
                this.num1 = value;
            },
            num2Change(value) {
                this.num2 = value;
            },
            logChildren() {
                console.log("children", this.$children);
                console.log("refs", this.$refs); // 需要在子组件上加 ref 属性, 才能获取到子组件
            }
        },
        components: {
            cpn
        }
    });
</script>
</html>
